body[data-theme=default] {
  .theme(
    #445268, // 背景色
    #fff, // 字体颜色
    #fff // 选中的字体颜色
  )
}
.icon-theme-default {
  color: #445268
}

// 赤
body[data-theme=red] {
  .theme(
    #AC2B50, // 背景色
    #fff, // 字体颜色
    // #62A92A // 选中的字体颜色
    #Fff // 选中的字体颜色
  )
}
.icon-theme-red {
  color: #AC2B50
}

// 橙
body[data-theme=orange] {
  .theme(
    #BF5E30, // 背景色
    #fff, // 字体颜色
    #fff // 选中的字体颜色
  )
}
.icon-theme-orange {
  color: #BF5E30
}


// 黄
body[data-theme=yellow] {
  .theme(
    #FF9900, // 背景色
    #fff, // 字体颜色
    #0D58A6 // 选中的字体颜色
  )
}
.icon-theme-yellow {
  color: #FF9900
}

// 绿
body[data-theme=green] {
  .theme(
    #1F7D63, // 背景色
    #fff, // 字体颜色
    #fff // 选中的字体颜色
  )
}
.icon-theme-green {
  color: #00A779
}


// 青
body[data-theme=cyan] {
  .theme(
    #747474, // 背景色
    #fff, // 字体颜色
    // #B3B3B3 // 选中的字体颜色
    #fff // 选中的字体颜色
  )
}
.icon-theme-cyan {
  color: #747474
}

// 蓝
body[data-theme=blue] {
  .theme(
    #0773A1, // 背景色
    #fff, // 字体颜色
    #fff // 选中的字体颜色
  )
}
.icon-theme-blue {
  color: #0773A1
}

// 紫
body[data-theme=violet] {
  .theme(
    #61257F, // 背景色
    #fff, // 字体颜色
    #fff // 选中的字体颜色
  )
}

.icon-theme-violet {
  color: #61257F
}


@menu-color: '';
.theme(
  @backcolor:#445268, // 背景色
  @fcolor:#fff, // 字体颜色
  @active-fcolor: #409EFF // 选中的字体颜色
  ) {
  .main-layout__aside, .el-menu-item, .el-submenu__title, .el-menu, .login{ // 左侧背景色
    background: @backcolor !important;
  }
  .el-submenu__title, .el-menu-item { // menu 的 hover背景色 
    &:hover {
      background: darken(@backcolor, 10%) !important;
    }
  }
  .el-menu-item, .el-submenu__title, .the-menu .iconfont {
    color: @fcolor !important; // menu 字体颜色
  }
  .el-menu-item.is-active {
    color: @active-fcolor !important; // menu 选中的字体颜色
  }
  .main-layout__aside .aside__body { // 边框阴影
    border-top: 1px solid lighten(@backcolor, 5%)  !important;
    box-shadow: 0px -1px 1px darken(@backcolor, 5%)  !important;
  }
  .main-layout__aside footer { // 边框阴影
    border-top: 1px solid lighten(@backcolor, 5%)  !important;
    box-shadow: 0px -1px 1px darken(@backcolor, 5%)  !important;
  }
  .el-submenu__title i {
    color: lighten(@backcolor, 20%);
  }

  // 登录页

  .login-form .el-form-item {
    background: darken(@backcolor, 5%) !important;
  }
  .login-form {
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: #eee;
      height: 50px;
      &:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px darken(@backcolor, 5%) inset !important;
        -webkit-text-fill-color: #fff !important;
      }
    }
  }
}

